let textCanvas, textCtx;
const canvasWidth = window.innerWidth;
const canvasHeight = window.innerHeight;
// 适配移动端
let fontSize = canvasWidth * 0.2;
if (fontSize > 140) fontSize = 180;
const yOffset = canvasHeight * 0.7 - canvasHeight / 2;
let textPixels = [];
let fireworks = [];
let particles = [];
// 创建一个Container
const stage = new PIXI.Container();
const card = document.getElementById("card");
const imgBox = document.getElementById("imgBox");
stage.interactive = true;
stage.on("click", (e) => {
  addClass(card, "showCard");
});
//自动检测渲染器
const renderer = PIXI.autoDetectRenderer(canvasWidth, canvasHeight);
document.getElementById("fireWorks").appendChild(renderer.view);
renderer.resize(canvasWidth, canvasHeight);

let textures = PIXI.Texture.from(
  "https://s3.bmp.ovh/imgs/2022/01/0d7afb4d0700761e.png"
  // "https://s3.bmp.ovh/imgs/2022/01/24f7ec46dd1432f1.png"
  // "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6c61ae65d1c41ae8221a670fa32d05aa.svg"
  // "https://s3.bmp.ovh/imgs/2022/01/cc6ffd6ce546debc.png"
);
fireWorksShowBegin();

function fireWorksShowBegin() {
  initCanvas();
  initFireworks();
  animation = requestAnimationFrame(fireWorksAnimate);
}
function initCanvas() {
  textCanvas = document.getElementById("textFireWorks");
  textCtx = textCanvas.getContext("2d");
  textCanvas.style.width = canvasWidth + "px";
  textCanvas.style.height = canvasHeight + "px";
  textCanvas.width = canvasWidth;
  textCanvas.height = canvasHeight;
  textCtx.textAlign = "center";
  textCtx.textBaseline = "top";
  textCtx.font = fontSize + 'px "宋体"';
  textCtx.fillStyle = "#fff";
  textCtx.fillText("新春快乐", canvasWidth / 2, 0);
  //获取画布位置
  let pix = textCtx.getImageData(0, 0, canvasWidth, canvasHeight).data;
  let gap = 6;
  for (let h = 0; h < canvasHeight; h += gap) {
    for (let w = 0; w < canvasWidth; w += gap) {
      // 当前像素块相对于画布的索引位置
      let position = (canvasWidth * h + w) * 4;
      let r = pix[position],
        g = pix[position + 1],
        b = pix[position + 2];
      if (r + g + b !== 0) {
        textPixels.push({
          x: w,
          y: h,
        });
      }
    }
  }
}

function initFireworks() {
  shuffle(textPixels);
  for (let i = 0, l = textPixels.length; i < l; i++) {
    createEmojiFirework(textures, textPixels[i], i);
  }
}
function createEmojiFirework(text, pos, i) {
  setTimeout(function () {
    let size = 20;
    let firework = new PIXI.Sprite(text);
    firework.explodePosition = {
      x: pos.x,
      y: pos.y + yOffset,
    };
    firework.position.x = Math.random() * canvasWidth;
    firework.position.y = canvasHeight + Math.random() * 40;
    firework.width = size;
    firework.height = size;
    firework.speed = 0.001 + Math.random() * 0.05;
    firework.image = text;
    fireworks.push(firework);
    if (stage) {
      stage.addChild(firework);
    }
  }, i * 10);
}

function fireWorksAnimate() {
  requestAnimationFrame(fireWorksAnimate);
  for (let i = 0, l = particles.length; i < l; i++) {
    particles[i].position.x += particles[i].speed.x;
    particles[i].position.y += particles[i].speed.y;
    particles[i].speed.y += 0.03;
    particles[i].alpha -= 0.01;
  }
  for (let i = 0; i < fireworks.length; i++) {
    fireworks[i].position.x +=
      (fireworks[i].explodePosition.x - fireworks[i].position.x) *
      fireworks[i].speed;
    fireworks[i].position.y +=
      (fireworks[i].explodePosition.y - fireworks[i].position.y) *
      fireworks[i].speed;
    if (!fireworks[i].exploded) {
      if (
        Math.abs(fireworks[i].position.x - fireworks[i].explodePosition.x) +
          Math.abs(fireworks[i].position.y - fireworks[i].explodePosition.y) <
        100
      ) {
        fireworks[i].exploded = true;
        explodeFirework(fireworks[i]);
      }
    }
  }
  // 将对象渲染到其 WebGL 视图。
  renderer.render(stage);
}

// 爆炸特效
function explodeFirework(firework) {
  for (let i = 0; i < 10; i++) {
    let size = fontSize / 10 + (Math.random() * fontSize) / 10;
    let particle = new PIXI.Sprite(firework.image);
    let angle = Math.random() * (2 * Math.PI);
    particle.speed = {
      x: Math.cos(angle) * (2 + Math.random() * 10) * 0.4,
      y: Math.sin(angle) * (2 + Math.random() * 10) * 0.4,
    };
    particle.position.x = firework.position.x;
    particle.position.y = firework.position.y;
    particle.width = size;
    particle.height = size;
    particles.push(particle);
    stage.addChild(particle);
  }
}

//打乱位置
function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue,
    randomIndex;
  while (0 !== currentIndex) {
    // 选择一个剩余的元素
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

function hasClass(obj, cls) {
  return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
function addClass(obj, cls) {
  if (!hasClass(obj, cls)) obj.className += " " + cls;
}
card.onmouseover = () => {
  toggleClass(imgBox, "imgBoxAct");
};
card.onmouseout = () => {
  toggleClass(imgBox, "imgBoxAct");
};
function removeClass(obj, cls) {
  if (hasClass(obj, cls)) {
    var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
    obj.className = obj.className.replace(reg, " ");
  }
}
function toggleClass(obj, cls) {
  if (hasClass(obj, cls)) {
    removeClass(obj, cls);
  } else {
    addClass(obj, cls);
  }
}
